<template>
  <div class="todo-item-action">
    <div class="flex">
      <div class="label">{{ item?.label }}</div>
      <div>
        <a-tooltip :content="item?.tooltip" v-if="item.tooltip">
          <icon-question-circle class="svgtooltip" />
        </a-tooltip>
      </div>
    </div>
    <div class="count" :style="{ color: item?.count > 0 ? '#F53F3F' : '#00B42A' }">{{ item?.count }}</div>
    <div class="view">
      <a-button v-permission="item.permission" type="primary" size="mini" @click.stop="handleview">查看</a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'Todo',
    props: {
      item: {
        type: Object,
      },
    },
    emits: ['onhandleview'],
    setup(props, { emit }) {
      const handleview = () => {
        emit('onhandleview', props.item)
      }
      return {
        handleview,
      }
    },
  })
</script>

<style lang="less" scoped>
  .todo-item-action {
    background: #f6f7f8;
    border-radius: 2px 2px 2px 2px;
    padding: 12px;
    min-height: 100px;
  }
  .label {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d2129;
    line-height: 22px;
    word-break: keep-all;
  }
  .svgtooltip {
    width: 16px;
    height: 16px;
    margin: 2px 0 0 4px;
  }
  .flex {
    display: flex;
  }
  .count {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    line-height: 28px;
  }
  .view {
    display: flex;
    justify-content: flex-end;
  }
</style>
